<template>
  <base-breadcrumb :title="title">
    <!-- 品质工程新六项措施评分 -->
    <div
      id="base-breadcrumb"
      style="position: relative; overflow: hidden"
    >
      <!-- 项目信息 -->
      <a-card
        :bordered="false"
        class="mb12"
      >
        <title-name title="项目信息" />
        <a-form-model
          ref="ruleForm"
          :model="form"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 18 }"
          :rules="editModel != 0 ? rules : {}"
        >
          <a-row>
            <a-col
              :span="16"
            >
              <a-form-model-item
                label="所属单位"
                prop="projectId"
              >
                <!--                <select-project-->
                <!--                  v-model="form.projectId"-->
                <!--                  :disabled="editModel == 0"-->
                <!--                  placeholder="请选择"-->
                <!--                  :form="form"-->
                <!--                  :is-clear="editModel == 2"-->
                <!--                  :is-edit="editModel != 2"-->
                <!--                  :auto-selected="editModel == 2"-->
                <!--                />-->
                <org-tree-select
                  v-model="form.projectId"
                  is-auto-select-first
                  is-need-auth
                  check-strictly
                  :disabled="editModel == 0"
                  @select="selectOrg"
                />
              </a-form-model-item>
            </a-col>
            <!--            <a-col-->
            <!--              :xs="24"-->
            <!--              :sm="12"-->
            <!--              :md="8"-->
            <!--              :lg="8"-->
            <!--            >-->
            <!--              <a-form-model-item-->
            <!--                label="分公司名称"-->
            <!--                prop="branchCompanyId"-->
            <!--              >-->
            <!--                <select-sub-company-->
            <!--                  v-model="form.branchCompanyId"-->
            <!--                  :disabled="editModel == 0"-->
            <!--                  :auto-selected="editModel == 2"-->
            <!--                  placeholder="请选择"-->
            <!--                />-->
            <!--              </a-form-model-item>-->
            <!--            </a-col>-->
            <!--            <a-col-->
            <!--              :xs="24"-->
            <!--              :sm="12"-->
            <!--              :md="8"-->
            <!--              :lg="8"-->
            <!--            >-->
            <!--              <a-form-model-item-->
            <!--                label="项目名称"-->
            <!--                prop="projectId"-->
            <!--              >-->
            <!--                <select-project-->
            <!--                  v-model="form.projectId"-->
            <!--                  :disabled="editModel == 0"-->
            <!--                  placeholder="请选择"-->
            <!--                  :form="form"-->
            <!--                  :is-clear="editModel == 2"-->
            <!--                  :is-edit="editModel != 2"-->
            <!--                  :auto-selected="editModel == 2"-->
            <!--                />-->
            <!--              </a-form-model-item>-->
            <!--            </a-col>-->
            <a-col
              :xs="24"
              :sm="12"
              :md="8"
              :lg="8"
            >
              <a-form-model-item label="考核人">
                <BaseInput
                  v-model="form.assessmentPeople"
                  disabled
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-card>
      <!-- 表格 -->
      <a-card
        :bordered="false"
        style="margin-bottom: 50px"
      >
        <title-name title="评分" />
        <!-- <div id="tableBox" :style="[{height:boxHeight,minHeight:'250px',overflow:'auto'}]"> -->
        <div id="tableBox">
          <s-table
            ref="table"
            bordered
            table-layout="fixed"
            :scroll="{ x: 1300 }"
            size="default"
            row-key="id"
            :columns="columns"
            :data="loadData"
            :alert="true"
            :show-pagination="false"
          >
            <!-- 考核情况 -->
            <div
              v-if="columns.length > 0"
              :slot="columns.length > 0 ? columns.find((item) => item.code == '4').dataIndex : ''"
              slot-scope="text, record"
            >
              <div v-if="editModel != 0">
                <a-row
                  v-if="record.defaultScore || record.evalue"
                  type="flex"
                  :gutter="10"
                  style="flex-wrap: nowrap"
                >
                  <BaseInput
                    v-if="record.defaultScore || record.evalue"
                    v-model="record[columns.find((item) => item.code == '4').dataIndex]"
                    style="width: 100%"
                    placeholder="请输入考核情况"
                  />
                  <a
                    class="ml12"
                    style="flex-shrink: 0"
                    @click="handleCancel(record)"
                  >取消打分</a>
                </a-row>
              </div>
              <ellipsis
                v-if="editModel == 0"
                tooltip
                :length="36"
              >
                {{ text }}
              </ellipsis>
              <template v-if="!record.defaultScore && !record.evalue">
                <a
                  v-if="editModel == 0"
                  class="del_btn"
                >未打分</a>
                <a
                  v-else
                  @click="record.evalue = true"
                >打分</a>
              </template>
            </div>
            <!-- 得分 -->
            <div
              v-if="columns.length > 0"
              :slot="columns.length > 0 ? columns.find((item) => item.code == '5').dataIndex : ''"
              slot-scope="text, record"
            >
              <BaseInputNumber
                v-if="(record.defaultScore || record.evalue) && editModel != 0"
                v-model="record[columns.find((item) => item.code == '5').dataIndex]"
                style="width: 100%"
                placeholder="请输入得分"
                :step="1"
                :precision="0"
                :min="0"
                :max="Number(record[columns.find((item) => item.code == '3').dataIndex]) || 100"
              />
              <div v-else>
                {{ record[columns.find((item) => item.code == '5').dataIndex] }}
              </div>
            </div>
            <!-- 备注 -->
            <div
              v-if="columns.length > 0"
              :slot="columns.length > 0 ? columns.find((item) => item.code == '6').dataIndex : ''"
              slot-scope="text, record"
            >
              <BaseInput
                v-if="(record.defaultScore || record.evalue) && editModel != 0"
                v-model="record[columns.find((item) => item.code == '6').dataIndex]"
                :max-length="30"
                placeholder="请输入备注"
              />
              <div v-else>
                {{ record[columns.find((item) => item.code == '6').dataIndex] }}
              </div>
            </div>
          </s-table>
        </div>
      </a-card>
      <!-- 页脚操作栏 -->
      <div
        class="btn_box page-btn-right-top"
      >
        <a-button
          v-if="editModel"
          :loading="loading"
          type="primary"
          class="button_right"
          @click="handleSubmit"
        >
          提交
        </a-button>
        <a-button
          type="primary"
          @click="$multiTab.close()"
        >
          关闭
        </a-button>
      </div>
    </div>
  </base-breadcrumb>
</template>

<script>
import { STable, Ellipsis } from '@/components' // 表格
import { sixMeasuresScore } from '@/api/quality/quality' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import cloneDeep from 'lodash.clonedeep' // 深拷贝
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目名称
import Vue from 'vue'

export default {
  name:'a'+ Date.now(),
  extends: new BaseEditPage(),
  components: {
    STable,
    SelectSubCompany,
    SelectProject,
    Ellipsis
  },
  data() {
    return {
      // 用户信息
      userInfo: Vue.getAcloudProvider().getUserInfo(),
      // 表头
      columns: [],
      // 查询参数
      queryParam: {},
      // 盒子高度
      boxHeight: 0,
      loading: false,
      editModel: 0,
      id: '',
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        let args = {
          scoringParty: this.scoringParty
        }
        if (this.id) {
          args.id = this.id
        }
        return sixMeasuresScore.getDetail(args).then((res) => {
          if (res.code == 200) {
            let datas = cloneDeep(res)
            // 映射项目信息
            res.data.projectInfo && (this.form = res.data.projectInfo)
            this.id = res.data.id
            if (this.editModel == 2) {
              this.form.assessmentPeople = this.userInfo.employee.name
              this.form.assessmentPeopleId = this.userInfo.id
            }
            // 映射表头
            this.columns = res.data.header.map((item) => {
              // 若表头是考核内容
              if (item.code == '1') {
                this.$nextTick(() => {
                  // 自定义单元格，将考核内容列一样的行合并
                  item.customRender = (value, row, index) => {
                    const obj = {
                      children: value,
                      attrs: {}
                    }
                    // 若该行考核内容和上一行一致，则使其隐藏
                    if (index != 0 && res.data.content[index - 1][item.dataIndex] == value) {
                      obj.attrs.rowSpan = 0
                      // 若不是，则往下合并与改行考核内容一致行的总行数
                    } else {
                      obj.attrs.rowSpan = cloneDeep(res.data.content).filter((i) => i[item.dataIndex] == value).length
                    }
                    return obj
                  }
                })
              }
              // 若表头是考核情况、评分、备注时，自定义列
              if (item.code == '4' || item.code == '5' || item.code == '6') {
                item.scopedSlots = { customRender: item.dataIndex }
                item.width = item.code == '4' ? 320 : 250
              } else if(item.code == '3'){
                item.width = 80
              }else {
                item.width = 200
              }
              return item
            })
            // 映射表格列表
            datas.data = res.data.content.map((item) => {
              // 添加打分标志
              item.defaultScore = item[cloneDeep(res.data.header).find((item) => item.code == '5').dataIndex]
              item.evalue = item.defaultScore ? true : false
              return item
            })
            // 列表对象
            this.sixMeasuresScoring = datas.data
            return datas
          }
        })
      },
      form: {},
      sixMeasuresScoring: [],
      rules: {
        branchCompanyId: [{ required: true, message: '请选择分公司' }],
        projectId: [{ required: true, message: '请选择项目' }]
      },
      titles: ['品质工程新六项措施评分查看', '品质工程新六项措施评分编辑', '品质工程新六项措施评分添加']
    }
  },
  methods: {
    selectOrg(val) {
      this.form.branchCompanyId = val[val.length - 1].orgId
    },
    /**
     * 取消评分
     */
    handleCancel(e) {
      this.$nextTick(() => {
        let memo = e[this.columns.find((item) => item.code === '4').dataIndex] // 考核情况
        let value = e[this.columns.find((item) => item.code === '5').dataIndex] // 得分
        let remark = e[this.columns.find((item) => item.code === '6').dataIndex] // 备注
        // 取消打分
        e.evalue = false
        // 重置检查情况
        memo && (e[this.columns.find((item) => item.code === '4').dataIndex] = '')
        // 重置初始得分值和真实得分值
        e.defaultScore = ''
        e[this.columns.find((item) => item.code === '5').dataIndex] = ''
        // 重置备注
        remark && (e[this.columns.find((item) => item.code === '6').dataIndex] = '')
      })
    },
    /**
     * 提交表单
     */
    handleSubmit() {
      let that = this
      that.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let sixMeasuresScoring = that.sixMeasuresScoring
          let dataIndex = that.columns.find((item) => item.code == '5').dataIndex // 得分的key
          if (!cloneDeep(sixMeasuresScoring).some((item) => !item[dataIndex] && item[dataIndex] != 0 && item.evalue)) {
            // 有得分的列表
            let form = {
              content: sixMeasuresScoring,
              projectInfo: that.form,
              header: that.columns,
              scoringParty: that.scoringParty
            }
            if (that.id) {
              form.id = that.id
            }
            that.loading = true
            sixMeasuresScore
              .update(form)
              .then((res) => {
                that.loading = false
                that.$message.success(['编辑', '添加'][that.editModel - 1] + '成功！')
                that.$multiTab.close()
              })
              .catch((res) => {
                // that.$message.warning(['编辑', '添加'][that.editModel - 1] + '失败！')
                that.loading = false
              })
          } else {
            this.$message.warning('得分不能为空！')
          }
        }
      })
    }
  }
}
</script>

